<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>客户管理-客户列表</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/formSelects-v4.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/client.css">
	<script src='/js/jquery-2.1.1.min.js'></script>
    <script src='/js/plugin/layui-v2.3.0/layui/layui.js'></script>
    <script src='/js/common.js'></script>
</head>
<style>
 ::-webkit-scrollbar-thumb {
  background:#a2a2a2; 
  border-radius: 10px;
  height:50%;
}
::-webkit-scrollbar{width:6px;}
body{
	overflow-y: scroll;
}
.date-input{
	padding-left:30px;
    background: url(/images/icon/rili_icon.png) no-repeat 10px center !important;
} 
</style>
<body style="box-sizing: border-box;">
	<div class="kb-out-box">
		<div class="kb-content my-locations-list">
			<section class="kb-content-container clearfix layui-form">
				<header class="nav-header" >
					<div class="nav-section-header-title">
						<span>客户</span>
						<div class="f-right">
							<button class="layui-btn layui-btn-normal layui-btn-radius" id="add-employee"><i class="layui-icon">&#xe654;</i>添加客户</button>
						</div>
					</div>
					<div class="nav-section-action-bar layui-form">
						<div class="layui-form-item mag-top-20">
						    <div class="layui-input-inline" >
								<select name="project" xm-select="project" xm-select-show-count="1" xm-select-skin="normal">
						     	 	<option value="">赢单分店</option>
							    </select>
						    </div>
						    <div class="layui-input-inline" >
						     	 <select name="executor" id="executor" lay-filter="where" >
						     	 	<option value="">负责人</option>
							    </select>
						    </div>
						    <div class="layui-input-inline" >
						     	 <select name="customerStatus" lay-filter="where" >
						     	 	<option value="">选择状态</option>
						     	 	<option value="0">初步接洽</option>
						     	 	<option value="1">赢单</option>
						     	 	<option value="2">流失</option>
							    </select>
						    </div>
						    <div class="layui-input-inline" >
						     	 <select name="customerSource" lay-filter="where" >
						     	 	<option value="">选择来源</option>
						     	 	<option value="0">线上</option>
						     	 	<option value="1">中介</option>
						     	 	<option value="2">社交网络</option>
						     	 	<option value="3">推荐</option>
							    </select>
						    </div>
						</div>
					</div>
					<div class="nav-section-action-bar layui-form">
						<div class="layui-form-item mag-top-20">
							<div class="layui-input-inline common-search" style="margin-bottom:0">
							     <input type="text" name="customerName" id="customerName"  autocomplete="off" class="layui-input " placeholder="搜索客户">	 
							</div>
						</div>
					</div>
				</header>
				<article>
					<div>
						<table id="customerList" lay-filter="customerList"></table>
					</div>
				</article>
			</section>
		</div>
	</div>
<script>
    layui.config({
        base: '/js/plugin/layui-v2.3.0/layui/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects-v4'
    }).use(['element',"layer","form",'table','formSelects'], function(){
    	var table = layui.table,form=layui.form;
    	var formSelects=layui.formSelects;
    	//初始化多选下拉值 分店和负责人
    	formSelects.config('project',{
    		type: 'get',
    		searchUrl:'/app/customerInfo/getProjectJson',
			keyName: 'text',
   		    keyVal: 'id' 
    	});
    	initFormSelectsExt({ //负责人
			id: "executor",
			url: "/system/org/user/selectjson",
			first: "负责人"
		});
    	
		//表格
		var myTable = table.render({
			elem: '#customerList',
			//height: '100%',
			width:'100%',
			url: '/app/customerInfo/listdata', //数据接口
			page: true, //开启分页
			loading:true,
			cols: [[ //表头
				{field: 'customerName',event:'infoEvent',style:'cursor: pointer;',align:'center', title: '客户名称',width:120},
				{title: '客户来源',event:'infoEvent',style:'cursor: pointer;',align:'center',width:70,templet:function(d){
						if(d.customerSource==0){
							return "线上";
						}else if(d.customerSource==1){
							return "中介";
						}else if(d.customerSource==2){
							return "社交网络";
						}else if(d.customerSource==3){
							return "推荐";
						}
					}
				},
		    	{title: '状态',event:'infoEvent',style:'cursor: pointer;',align:'center',width:75,templet:function(d){
			    		if(d.customerState==0){
							return "初步接洽";
						}else if(d.customerState==1){
							return "赢单";
						}else if(d.customerState==2){
							return "流失";
						}
		    		}
				},
		    	{field: 'executor',event:'infoEvent',style:'cursor: pointer;',align:'center',width:75, title: '当前执行人'},
		    	{field: 'created',event:'infoEvent',style:'cursor: pointer;',align:'center',width:90, title: '创建时间'},
		    	{field: 'modified',event:'infoEvent',style:'cursor: pointer;',align:'center',width:90, title: '更新时间'},
		    	{title: '更多信息',style:'cursor: pointer;',align:'left',templet:function(d){
		    			var s="";
		    			if(d.winProjectid){
			    			s+="赢单分店："+d.winProjectid
		    			}else{
		    				s="<i class=\"layui-icon layui-icon-delete\" lay-event=\"del\"></i>";
		    			}
		    			return s;
		    		}
		    	}
			]]
		});
		//监听行列表单元格点击
		table.on('tool(customerList)',function(obj){
			if(obj.event==='infoEvent'){
				var url="/app/customerInfo/details/"+obj.data.id;
				location.href=url;
			}else if(obj.event==='del'){
				layer.confirm('是否删除该客户？', function(index){
					layer.close(index);
					var loadIndex=layer.load(2);
					$.post("/app/customerInfo/delCustomerAll",{
						cusId:obj.data.id
					},function(data){
						layer.close(loadIndex);
						layer.msg(data.error);
					});
					obj.del();
				}, function(){});
			}
		});
		
		//添加客户
		$('#add-employee').on("click",function(){
			parent.setSrc("app/customerInfo/addClient")
		});
		
		//监听多选select分店change事件
		var params=new Object();//查询参数,每个事件只修改自己对应的参数 
		formSelects.on('project',function(id, vals, val, isAdd, isDisabled){
			//id:点击select的id;vals:当前select已选中的值;val:当前select点击的值;isAdd:当前操作选中or取消;isDisabled:当前选项是否是disabled
		    params.projectId="";
			if(isAdd){//选中
				$.each(vals,function(i,v){
					params.projectId+=(v.val+",");
				});
				params.projectId+=val.val;
			}else{//取消
				$.each(vals,function(i,v){
					params.projectId+=(v.val+",");
				});
				params.projectId=params.projectId.replace(new RegExp(val.val,'g'),'').replace(/,{2,}/,',');
			}
			if(params.projectId[0]==','){//第一个值不能为','
				params.projectId=params.projectId.substring(1);
			}
			search();
		    return true;
		});
		//监听普通select,通过name名称当作属性
		form.on('select(where)',function(data) {
			params[data.elem.name]=data.value;
			search();
		});
		var timeOut=null;
		$("#customerName").on('input',function(){
			clearInterval(timeOut);
			var _this=this;
			timeOut=setTimeout(function(){
				params.customerName=$(_this).val();
				search();
			},500);
		});
		
		//重新载入表格 带着条件
		function search(){
			myTable.reload({
				where:{
					params:params
				},
			});
		}
		
    });
	
</script>
</body>
</html>
